<template>
	<view class="content">
		<mine-head :title="headTitle" :background="background" :borderBottom="false"></mine-head>
		<view class="con">
			<view class="title-box _df _jb _ac">
				<view class="title">
					
				</view>
				<view class="all _df _jc _ac">
					<image src="@/static/img/mine/jfIcon1.png" mode=""></image>
					<span>{{money}}</span>
				</view>
			</view>
			<view class="box1">
				<view class="title">
					积分兑换
				</view>
				<view class="text-box">
					<view class="pic fl">
						<image src="@/static/img/mine/jfImg1.png" mode=""></image>
					</view>
					<view class="text">
						<view class="name">
							{{cardData.name + cardData.codeData+'次'}}
						</view>
						<view class="money-box _df _ac _jb">
							<view class="num _df _ac">
								<image src="@/static/img/mine/jfIcon1.png" mode=""></image>
								{{cardData.valueData}}
							</view>
							<view class="btn _df _jc _ac" @click="duihuan">
								兑换
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="title _df _ac _jb" style="margin-bottom: 10rpx;">
					<span>积分明细</span>
					<span v-if="page.data.newDate != ''" style="margin: 0 auto 0 30rpx;font-size: 24rpx;color: #999;" @click="allList">全部</span>
					<view class="time _df _ac" @click="show = true">
						{{page.data.newDate}}
						<u-icon class="ml20" name="calendar" size="40" color="#7089DA"></u-icon>
					</view>
				</view>
				<view class="list2">
					<view class="item _df _ac _jb" v-for="(item,index) in list" :key="index">
						<view class="text">
							<view class="name">
								{{item.title}}
							</view>
							<view class="info">
								{{item.createTime}}
							</view>
						</view>
						<view class="right">
							<view class="name">
								{{item.plusReduce==0?'-':'+'}}{{item.integralIndex}}
							</view>
							<view class="info">
								积分余额：{{item.surplusIntegral}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<l-loadmore ref="more" :pageindex="page.page"></l-loadmore>
		<u-calendar active-bg-color="#7089DA" v-model="show" mode="date" @change="change"></u-calendar>
	</view>
</template>

<script>
	import moment from "moment";
	export default {
		data() {
			return {
				background:{
					backgroundColor: 'transparent'
				},
				time:'',
				headTitle:'',
				show:false,
				page:{
					page:1,
					size:10,
					data:{
						newDate:''
					}
				},
				list:[],
				totalPage:1,
				cardMoney:0,
				money:0,
				cardData:{}
			};
		},
		onLoad(options) {
			
		},
		onShow() {
			this.getUserSign()
			this.getMoney()
			this.getList()
		},
		methods:{
			change(e){
				this.page.data.newDate = e.result.slice(0,10)
				this.page.page = 1;
				this.totalPage = 1;
				this.getList()
			},
			allList(){
				this.page.data.newDate = ''
				this.page.page = 1;
				this.totalPage = 1;
				this.getList()
			},
			getList(){
				let that = this
				uni.$_post({
					url: "integral-adminPage",
					that: that,
					params: that.page,
					success(res) {
						let _data = res.data.lists;
						if(res.code == 0){
							_data.map((item) => {
								if(item.createTime) {
									item.createTime = item.createTime.slice(0, 16);
								}
										
							});
							//分页
							if (_data.length == 0) {
								that.totalPage = 0;
							}
							if (that.page.page > 1) {
								that.list = that.list.concat(_data);
							} else {
								that.list = _data;
							}
							// that.$refs.more.status = "loadmore";
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getUserSign(){
				let that = this
				uni.$_get({
					url: "getUserSign",
					that: that,
					success(res) {
						if(res.code == 0){
							that.money = res.data.userInteger
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getMoney(){
				let that = this
				let p = {
					data:'ai_commodity'
				}
				uni.$_post({
					url: "getKeyDomDataDictionary",
					that: that,
					params: p,
					success(res) {
						let _data = res.data;
						if(res.code == 0){
							that.cardData = _data
						
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			duihuan(){
				let that = this
				this.page.page = 1
				uni.$_get({
					url: "purchaseAi",
					that: that,
					success(res) {
						let _data = res.data;
						if(res.code == 0){
							uni.showToast({
								title: '兑换成功！',
								duration: 1500,
								icon:'success'
							});
							that.getUserSign()
							that.getList()
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			}
		},
		onReachBottom() {
			this.$refs.more.status = "loading";
			if (this.totalPage == 0) {
				this.$refs.more.status = "nomore";
				return;
			}
			this.page.page++;
			setTimeout(()=>{
				// this.$refs.more.status = "loading";
				this.getList();
			},1000)
			
		},
		onPageScroll(e) {
			if(e.scrollTop>0){
				this.isScroll = true
				this.background = {
					backgroundImage: 'linear-gradient(45deg, #eadefa, #afbef8)'
				}
				this.headTitle = '积分使用'
			}else{
				this.background = {
					backgroundColor: 'transparent'
				}
				this.headTitle = ''
			}
		 }
	}
</script>

<style lang="scss" scoped>
.content{
	min-height: 100vh;
	overflow-y: auto;
	background: url(@/static/img/mine/jfBg.png) no-repeat center / cover;
	.con{
		padding: 0 0 30rpx;
		.title-box{
			margin-bottom: 30rpx;
			.title{
				font-size: 60rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}
			.all{
				width: 150rpx;
				height: 64rpx;
				background: rgba(255,255,255,0.3);
				border-radius: 32rpx;
				font-size: 30rpx;
				font-family: $uni-font-family-Heavy;
				color: #000;
				image{
					width: 45rpx;
					height: 42rpx;
					margin: 0 15rpx 0 0;
				}
			}
		}
		.box1{
			background: #ffffff;
			border-radius: 50rpx;
			padding: 45rpx 30rpx 30rpx;
			margin-bottom: 30rpx;
			.title{
				font-size: 34rpx;
				font-family: $uni-font-family-Heavy;
				color: #000;
				margin-bottom: 30rpx;
				.time{
					font-size: 28rpx;
					color: #999;
					font-family: $uni-font-family-Medium;
				}
			}
			.text-box{
				overflow: hidden;
				.pic{
					width: 210rpx;
					overflow: hidden;
					border-radius: 10rpx;
					margin-right: 30rpx;
					&:before{
						padding-top: 63.8095%;
					}
				}
				.text{
					padding-top: 10rpx;
					.name{
						font-size: 30rpx;
						font-family: $uni-font-family-Bold;
						color: #000;
						margin-bottom: 30rpx;
					}
					.money-box{
						.num{
							font-size: 30rpx;
							font-family: $uni-font-family-Heavy;
							color: #DEAF35;
							image{
								width: 32rpx;
								height: 30rpx;
								margin-right: 4rpx;
							}
						}
						.btn{
							width: 100rpx;
							height: 52rpx;
							background: #7089DA;
							border-radius: 26rpx;
							font-size: 28rpx;
							font-family: $uni-font-family-Bold;
							color: #fff;
						}
					}
				}
			}
			.list2{
				min-height: 400rpx;
				.item{
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;
					
					.text{
						padding-right: 30rpx;
						.name{
							font-size: 30rpx;
							font-family: $uni-font-family-Bold;
							color: #1B1B1B;
							margin-bottom: 10rpx;
						}
						.info{
							font-size: 24rpx;
							color: #aaa;
							
						}
					}
					.right{
						.name{
							font-size: 40rpx;
							font-family: $uni-font-family-Bold;
							color: #E3BB54;
							text-align: right;
						}
						.info{
							font-size: 24rpx;
							color: #777;
							
						}
					}
				}
				
			}
			.item:last-child{
				border-bottom: none;
			}
		}
	}
}
</style>
